<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="考试分类"></NavBarVue>
		<view class="px-30">
			<view class="flex">
				<view :class="[syspat==i?'font-bold mr-30':'mr-30']" v-for="e,i in syspatList" :key="i"
					@click="obtainExaPaperlist(i)">
					<text class="text-sm">{{e}}</text>
					<view class="h-12 w-40 bg-gradient-to-r from-[#329EFF] to-[transparent]" v-if="syspat==i">
					</view>
				</view>
			</view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y class="h-full">
				<view class="p-30">
					<view class="flex justify-between items-center bg-white rounded-lg mb-30 p-20"
						v-for="e,i in jobList" :key="i">
						<text class="text-sm font-bold">《{{e.name}}》</text>
						<view class="py-10 px-20 rounded-lg bg-[#1296db]" @click="onExam(e.id)">
							<text class="text-white">去考试</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import userApi from '@/apis/apiList/userApi';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const syspat = ref(0)
	const syspatList = ["全部", "心理师咨询", "星图师试题", "卡牌师试题"]
	const jobList = ref([])
	const anchorId = ref("")
	const obtainExaPaperlist = (id) => {
		syspat.value = id
		userApi.obtainExaPaperlist({
			syspat: syspat.value
		}).then(res => {
			jobList.value = res.data
		})
	}
	const onExam = (id) => {
		uni.navigateTo({
			url: `/pages/user/exam?id=${id}&anchorId=${anchorId.value}`
		})
	}
	onLoad((option) => {
		anchorId.value = option.id
		obtainExaPaperlist(0)
	})
</script>

<style>

</style>